<template>
    <div class="">
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`未读消息(${unread.length})`" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span :class="scope.row.className">{{scope.row.newInfo}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column width="180">
                            <template slot-scope="scope">
                                接受人：{{scope.row.realname}}
                            </template>
                        </el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleRead(scope.row.contracts_id,scope.row.id)">标为已读</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <div class="handle-row">
                        <el-button type="primary">全部标为已读</el-button>
                    </div> -->
                </el-tab-pane>
                <el-tab-pane :label="`已读消息(${read.length})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="read" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span :class="scope.row.className">{{scope.row.newInfo}}</span>
                                </template>
                            </el-table-column>
                           <el-table-column width="180">
                            <template slot-scope="scope">
                                接受人：{{scope.row.realname}}
                            </template>
                        </el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="handleDel(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- <div class="handle-row">
                            <el-button type="danger">删除全部</el-button>
                        </div> -->
                    </template>
                </el-tab-pane>
                <el-tab-pane :label="`回收站(${recycle.length})`" name="third">
                    <template v-if="message === 'third'">
                        <el-table :data="recycle" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span :class="scope.row.className">{{scope.row.newInfo}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column width="180">
                                <template slot-scope="scope">
                                    接受人：{{scope.row.realname}}
                                </template>
                            </el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button @click="handleRestore(scope.row.id)">还原</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- <div class="handle-row">
                            <el-button type="danger">清空回收站</el-button>
                        </div> -->
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import api from '@/api/index';
import { getdate1 } from '@/utils/utils';
    export default {
        name: 'tabs',
        data() {
            return {
                message: 'first',
                showHeader: false,
                unread: [],
                read:[],
                recycle:[]
            }
        },
        mounted() {
            // this.initMetood();
        },
        methods: {
            initMetood(){
                 const loading = this.$loading({ text: '加载中...' });
                this.$http
                    .post(api.GET_NEWS_NUM)
                    .then((res) => {
                        console.log('res',res)
                        loading.close();
                        if (res.code == 1) {
                            let unread=Array.isArray(res.data.noReadyList)?res.data.noReadyList:[];
                            let read=Array.isArray(res.data.readyList)?res.data.readyList:[];
                            let recycle=Array.isArray(res.data.delList)?res.data.delList:[];
                            unread.length>0 && unread.forEach(item=>{
                                if(item.surplus_time>=0){
                                    item.newInfo="【"+item.title+"】-"+item.name_zs+"截止合同付款时间剩余"+Math.ceil(item.surplus_time/86400)+'天';
                                    item.className='blue';
                                }else{
                                    item.newInfo="【"+item.title+"】-"+item.name_zs+"截止合同付款已超时"+Math.ceil((item.surplus_time*-1)/86400)+'天';
                                    item.className='red';
                                }
                            });

                            read.length>0 && read.forEach(item=>{
                                if(item.surplus_time>=0){
                                    item.newInfo="【"+item.title+"】-"+item.name_zs+"截止合同付款时间剩余"+Math.ceil(item.surplus_time/86400)+'天';
                                    item.className='blue';
                                }else{
                                    item.newInfo="【"+item.title+"】-"+item.name_zs+"截止合同付款已超时"+Math.ceil((item.surplus_time*-1)/86400)+'天';
                                    item.className='red';
                                }
                            })

                            recycle.length>0 && recycle.forEach(item=>{
                                if(item.surplus_time>=0){
                                    item.newInfo="【"+item.title+"】-"+item.name_zs+"截止合同付款时间剩余"+Math.ceil(item.surplus_time/86400)+'天';
                                    item.className='blue';
                                }else{
                                    item.newInfo="【"+item.title+"】-"+item.name_zs+"截止合同付款已超时"+Math.ceil((item.surplus_time*-1)/86400)+'天';
                                    item.className='red';
                                }
                            })
                            this.unread=unread;
                            this.read=read;
                            this.recycle=recycle;
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            },
            handleRead(contract_id,id) {
                const loading = this.$loading({ text: '加载中...' });
                this.$http
                    .post(api.GET_NEWS_READY,{
                        contract_id:contract_id,
                        id:id
                    })
                    .then((res) => {
                        loading.close();
                        console.log('res')
                        if (res.code == 1) {
                            this.$message.success('操作成功');
                            this.initMetood();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            },
            handleDel(id) {
                const loading = this.$loading({ text: '加载中...' });
                this.$http
                    .post(api.GET_NEWS_DEL,{
                        id:id
                    })
                    .then((res) => {
                        console.log('res')
                        loading.close();
                        if (res.code == 1) {
                            this.$message.success('操作成功');
                            this.initMetood();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            },
            handleRestore(id) {
                const loading = this.$loading({ text: '加载中...' });
                this.$http
                    .post(api.GET_NEWS_ONDEL,{
                        id:id
                    })
                    .then((res) => {
                        console.log('res')
                         loading.close();
                        if (res.code == 1) {
                            this.$message.success('操作成功');
                            this.initMetood();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            }
        },
        computed: {
            unreadNum(){
                return this.unread.length;
            }
        }
    }

</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
.blue{
    color:blue;
}
.red{
    color:red;
}
</style>

